﻿{include file="common/header" /}
<script>
    Handlebars.registerHelper({
        'getStatus': function(status) {
            if(status)
            {
                return '正常';
            }
            return '<span style="color: red;">禁用</span>';

        },
        "isColdStroage":function (is_cold_stroage) {
            if(is_cold_stroage)
            {
                return `Yes`;
            }
            return `No`;
        }
    });
</script>
<div class="page-container">
	<form class="text-c mt-20"  method="post" id="myform" onkeydown="if(event.keyCode==13)return false;">
		<span class="select-box" style="width:150px">
					<select class="select" name="warehouse" size="1">
                            {{volist name="wareHouse" id="vo"}}
                            <option value="{{$vo->location_code}}">{{$vo->name}}</option>
                            {{/volist}}
					</select>
		</span>
		<input type="text" class="input-text" style="width:250px" placeholder="name" value="" name="name">
		<button type="button" class="btn btn-success" onclick="getData()"><i class="Hui-iconfont"></i> 搜索</button>
	</form>
	<div class="cl pd-5 bg-1 bk-gray mt-20">
		<span class="l">
			<a href="javascript:;" onclick="add('添加车辆','{{:url("vehicle/create")}}','1000','800')" class="btn btn-primary radius">
				<i class="Hui-iconfont"></i> 添加车辆</a>
		</span>
	</div>
	<style>
		.layui-table{
			display: block !important;
		}
	</style>
	<table id="table"  class="table table-border table-bordered table-bg tablesorter"  >
		<thead>
		<tr class="text-c">
			<th width="150">Name</th>
			<th width="90">WareHouse</th>
			<th width="150">Depot</th>
			<th width="150">Max Weight</th>
			<th width="90">Max Stops</th>
			<th>Cold Storage</th>
			<th>Status</th>
			<th width="100">Operate</th>
		</tr>
		</thead>
		<tbody id="tbody">

		</tbody>
	</table>
</div>

<div class="m-style M-box"></div>
<script id="table-lists" type="text/template">
	{{#each data}}
	<tr class="text-c">
		<td>{{name}}</td>
		<td class="td-status" >{{warehouse}}</td>
		<td class="td-status" >{{depot}}</td>
		<td class="td-status">{{max_weight}}</td>
		<td class="td-status">{{max_stops}}</td>
		<td class="td-status">{{{isColdStroage is_cold_storage}}}</td>
		<td class="td-status">{{{getStatus status}}}</td>
		<td class="td-manage">
			<a title="编辑" href="javascript:;" onclick="edit('{{id}}')" class="ml-5" style="text-decoration:none">
				<i class="Hui-iconfont">&#xe6df;</i>
			</a>
		</td>
	</tr>
	{{/each}}
</script>
<script type="text/javascript">

    getData();
    //异步获取数据
    function getData(page = 1){
        $.ajax({
            type: 'POST',
            url: '{{:url("/vehicle/index")}}?page='+page,
            data:$('#myform').serialize(),
            dataType: 'json',
            beforeSend:function(){
                var index= layer.msg('加载中...',{time:10000});
                layer.style(index, {
                    zIndex:"19991011"  //防止父框的弹出层显示在子框
                });
            },
            success: function(res){
                closeLayerMsg();
                var source=$('#table-lists').html();
                var template = Handlebars.compile(source);
                $('#tbody').html(template(res.msg));
                paginate(res.msg.total,res.msg.page)
            },
            error:function(data) {}
        })
    }

    function add(title,url,w,h) {
        layer_show(title,url,w,h)
    }
    function edit (id) {
        layer_show('编辑车辆','{{:url("/vehicle/update")}}?id='+id,800,800)
    }

</script>
{include file="common/footer" /}